﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <style>
        .c
        {
            background-color: gold;
            border-style: solid;
            border-width: 1px;
            width: auto;
            display: none;
        }
    </style>
</head>
<body>
    <div class="c">
        this is a test</div>
    <p>
        <a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p>
    <p>
        <a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p>
    <p>
        <a href="#" title="这是自带提示1.">自带提示1.</a></p>
    <p>
        <a href="#" title="这是自带提示2.">自带提示2.</a></p>
    <script type="text/javascript">
        $('a.tooltip').mouseover(function (e) {
            var myTooltip = $("<div id='myToolTip'></div>").appendTo($("body"));
            this.myTitle = this.title;
            this.title = "";
            myTooltip.text(this.myTitle);
            myTooltip.addClass('c')
            .css({
                'position': 'absolute',
                'top': (e.pageY + 20) + 'px',
                'left': (e.pageX + 10) + 'px'
            }).show('fast');
        }).mouseout(function () {
            this.title = this.myTitle;
            $('#myToolTip').remove();
        }).mousemove(function (e) {
            $('#myToolTip').css({
                'top': (e.pageY + 20) + 'px',
                'left': (e.pageX + 10) + 'px'
            });
        });
    </script>
</body>
</html>
